/* 顶部导航 */
.top-nav {
  top: 0;
  width: 100%;
  height: 90px;
  z-index: 100;
  position: absolute;

  .top-nav-main {
    display: flex;
    margin: 0 auto;
    height: inherit;
    padding: 0 10px;
    max-width: 1240px;
    align-items: center;
    justify-content: space-between;

    .top-nav-list {
      display: flex;

      li {
        padding: 0 30px;

        a {
          color: #fff;
          transition: color 0.3s;

          &:hover {
            color: #0095ff;
          }

        }

      }

    }

  }

  /* 移动端顶部导航 */
  .mobile-top-nav {
    display: none;
    margin: 0 auto;
    height: inherit;
    padding: 0 30px;
    max-width: 1240px;
    position: relative;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;

    .open {
      width: 30px;
      height: 15px;
      cursor: pointer;
      position: relative;

      div {
        width: 100%;
        height: 3px;
        position: absolute;
        border-radius: 50px;
        transition: all 0.3s;
        background-color: #666;
        transform-origin: center;

        &:first-child {
          top: 0;
        }

        &:nth-child(2) {
          bottom: 0;
        }

      }

    }

    .isOpen {
      div {
        width: 80%;
        top: 50% !important;

        &:first-child {
          transform: rotate(45deg);
        }

        &:nth-child(2) {
          transform: rotate(-45deg);
        }

      }

    }

    .mobile-nav-list {
      left: 0;
      height: 0;
      top: 70px;
      width: 100%;
      z-index: 200;
      position: absolute;
      overflow-y: scroll;
      transition: height .3s;
      background-color: #fff;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        width: 90%;
        margin: 0 auto;
        padding: 35px 0;
        border-bottom: 1px solid #f5f5f5;

        a {
          color: #000;
          display: block;
          font-size: 22px;
          font-weight: 500;
          transition: color .3s;

          &:hover {
            color: #0095ff;
          }

        }

      }

    }

  }

}

/* 轮播图 */
.swiper {
  width: 100%;
  height: 680px;

  .swiper-pagination {
    bottom: 24px !important;

    .swiper-pagination-bullet {
      opacity: 1;
      width: 9px;
      height: 9px;
      margin: 0 5px;
      cursor: pointer;
      background-color: #fff;
      border: 1px solid #fff;
    }

    .swiper-pagination-bullet-active {
      border: 1px solid #fff;
      background-color: transparent;
    }

  }

  .imgItem {
    width: 100%;
    height: 680px;
    background-size: cover;
    background-position: center;
  }

}

/* 响应式样式 */
@media screen and (max-width: 1000px) {
  .top-nav {
    height: 71px;
    position: relative;

    .top-nav-main {
      display: none;
    }

    .mobile-top-nav {
      display: flex;
    }

  }
}